<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue组件拆分-全局组件</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 挂载点，模板，实例之间的关 -->
		<div id="root">
			<input v-model="inputValue" />
			<button @click="handleClick">提交</button>
			<ul>
				<!-- <li v-for="(item ,index) of list " :key=index>{{item}}</li> -->
				<todo-item v-for="(item ,index) of list"
				 :key="index"
				 :content="item">
				</todo-item>
			</ul>
		</div>
		<script>
			//全局组件
			Vue.component('todo-item',{
				props:['content',],
				template:'<li>{{content}}</li>'
			})
			new Vue({
				el: "#root",
				data: {
					inputValue: "",
					list: [],
				},
				methods: {
					handleClick() {
						this.list.push(this.inputValue);
						this.inputValue="";
					},
				}

			})
		</script>
	</body>
</html>
